<template>
  <div class="regular-hexagon">
    <div
      class="icon-container"
      :style="{
        backgroundImage: 'url(' + $props.icon + ')',
      }"
      @click="getRiskZoningInfo"
    ></div>
    <span>{{ $props.title }}</span>
  </div>
</template>

<script>
import { getRiskZoning } from "@/api/zhjcright";
export default {
  props: ["title", "icon"],
  name: "RegularHexagon",
  data() {
    return {
      choseArray: [
        { key: "暴雪", type: 1 },
        { key: "高温", type: 2 },
        { key: "冰雹", type: 3 },
        { key: "暴雨", type: 4 },
        { key: "大风", type: 2 },
      ],
    };
  },
  mounted() {
  },
  methods:{
    async getRiskZoningInfo(){
      const type = this.choseArray.find(item=>this.$props.title == item.key).type;
      const options = {type:type};
      const res = await getRiskZoning(options);
      if(res.code == 200){
        this.$emit("getRiskZoningInfo",res.msg);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.regular-hexagon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  gap: 10px;
  .icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    height: 70%;
    // background-image: url('/src/assets/images/panel/大风.png');
    background-size: cover;
    &:hover {
      cursor: pointer;
    }
  }
  span {
    color: white;
    font-size: 12px;
    font-weight: bold;
  }
}
</style>
